<!DOCTYPE html>
<html>
	<head>
		<title>Configuring</title>
		<link rel="stylesheet" href="../../codebase/webix/webix.css" type="text/css" charset="utf-8">
		<script src="../../codebase/webix/webix.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="../../codebase//pivot.css" type="text/css" charset="utf-8">
		<script src="../../codebase/pivot.js" type="text/javascript" charset="utf-8"></script>

        <link rel="stylesheet" href="../common/samples.css" type="text/css" charset="utf-8">
		<script src="../common/testdata.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			html, body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
			.webix_message_area{
				width:400px;
			}
			.footer.webix_form{
				background: #f3f3f3;
			}
			.title{
				font-size: 17px;
			}
		</style>
	</head>
	<body>
		<div class='header_comment'>Setting/Getting structure</div>
		<div id="testA"></div>
		<script type="text/javascript" charset="utf-8">

        var structures = [{
	        id: "1",
            value:"GDP, Oil by Years",
            structure:{
                groupBy: "year",
	            values: [{name:"balance", operation:"max"},{name:"oil", operation:"max"}],
                filters:[]
            }
        },{
	        id: "2",
	        value:"Oil by Continents",
            structure:{
                groupBy: "continent",
                values: [{ name:"oil", operation:"max"}],
                filters:[{name:"year",type:"select"}]
            }
        },{
	        id: "3",
	        value:"Balance, GDP, Oil by Years",
            structure:{
                groupBy: "year",
                values: [{name:"balance", operation:"max"},{name:"gdp", operation:"max"},{name:"oil", operation:"max"}],
                filters:[{name:"continent", type:"select"}, {name:"name", type:"select"}]
            }
        }];

		webix.ready(function(){
			webix.ui({
                container:"testA",
			rows:[
				{
					view: "form", css: "footer", paddingY: 5,  cols:[
						{view: "label", label: "<span class='title'>Webix Pivot<span>" },
						{view: "button", type: "form", value: "Get Structure", align: "right", inputWidth: 150, id: "get"}
					]


				},
				{
					cols:[
						{rows:[
							{ view:"list", id:"structures", data:structures, scroll: false, width: 250, select:true }
						]},
						{
							id:"pivot",
							view:"pivot-chart",
							height:300,
							width:800,

							data:pivot_dataset,
							structure:{
								groupBy: "year",
								values: [{name:"balance", operation:"max"},{name:"oil", operation:"max"}],
								filters: []
							},
							fieldMap:{
								gdp: "GDP",
								balance: "Balance",
								oil: "Oil",
								form: "Government",
								name: "Country",
								year: "Year",
								continent: "Continent",
								id: "Id"
							},
							chart: {
								scale: "logarithmic"
							}
						}
					]
				}
			]



            });
			$$("structures").select(1);
            $$("structures").attachEvent("onItemClick", function(id) {
                var str = webix.copy(this.getItem(id).structure);
                $$("pivot").define("structure", str);
                $$("pivot").render();
            });
            $$("get").attachEvent("onItemClick", function() {
                var str = $$("pivot").config.structure;
                webix.message(JSON.stringify(str));
            });

		});

		</script>
	</body>
</html>